How can you centre text vertically and horizontally inside a box?

Centering Text in a Box Using CSS

There are several ways to center text both vertically and horizontally inside a container. The best method depends on whether the container has a fixed height or uses flexible layout systems like Flexbox or Grid.

Common Methods for Centering Text

Using Flexbox: Set the container to display: flex, then use justify-content: center for horizontal alignment and align-items: center for vertical alignment.
Using Grid: Set the container to display: grid and use place-items: center to center content both vertically and horizontally.
Using Positioning: With position: relative on the container and position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) on the text, you can center it regardless of container size.
Using Line Height: For single-line text in a fixed-height box, set line-height equal to the container height to center vertically and use text-align: center for horizontal centering.

Example: Flexbox Centering

Example: Grid Centering

Example: Absolute Positioning Centering

These methods allow precise vertical and horizontal centering, whether you have dynamic content, multiple lines of text, or responsive layouts.

Key Takeaways

Flexbox and Grid are the most flexible and recommended methods for centering content.
Absolute positioning works well for fixed-size containers or overlay elements.
Line-height method is limited to single-line text with a fixed container height.
Always test centering in responsive scenarios to ensure consistent alignment.

Question Loading...

Transformation and Transition

Frameworks

Everything else